<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap-table.min.css">
    <script src="js/bootstrap-table.min.js"></script>
    <script src="js/bootstrap-table-zh-CN.min.js"></script>
    <script type="text/javascript" src="js/layui.min.js"></script>
    <link rel="stylesheet" href="css/layui.min.css"/>
    <link href="css/bootstrap-switch.min.css" rel="stylesheet">
    <script src="js/bootstrap-switch.min.js"></script>
</head>
<body>
<div class="container-fluid" id="app">
    <div id="toolbar">
        <form class="form-inline">
            <div class="form-group">
                <label>用户名称</label>
                <input id="username" type="text" class="form-control input1">
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" onclick="search()" style="margin-left: 15px">
                    <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
                <button type="reset" class="btn btn-default" onclick="fresh()">
                    <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                </button>
            </div>
        </form>
    </div>
    <!--    bootstrap-table-->
    <table id="table"></table>
</div>
</body>
<script>
    //设置table属性
    $('#table').bootstrapTable({
        url: 'userInfo/queryAll',
        method: "get",
        pagination: true, //启动分页
        toolbar: '#toolbar',                //工具按钮用哪个容器
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 20, 50, 'All'],        //可供选择的每页的行数（*）
        smartDisplay: false,                 //智能显示关每页的行数
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        height: 710,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        queryParamsType: "undefined",
        queryParams: function queryParams(params) {   //设置查询参数
            var param = {
                pageNumber: params.pageNumber,
                pageSize: params.pageSize,
                username:$.trim($('#username').val())
            };
            return param;
        },
        onLoadSuccess: function () {  //加载成功时执行
            //初始化开关按钮
            initSwitch()
            //复选框水平垂直居中显示
            $(".bs-checkbox").css({'text-align': 'center', 'vertical-align': 'middle'})
            $(".bootstrap-switch").css({'border-radius': '20px'})

        },
        onLoadError: function () {  //加载失败时执行
            // layer.msg("加载数据失败", {time : 1500, icon : 2});
            // alert("加载数据失败")
        },
        //设置列属性
        columns: [{
            checkbox: true,
            visible: true,
        }, {
            title: '序号',
            width: 40,
            align: "center",
            valign: 'middle',
            formatter: function (value, row, index) {
                var pageSize = $('#table').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                var pageNumber = $('#table').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
                return pageSize * (pageNumber - 1) + index + 1;    //返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
            }
        }, {
            field: 'id',
            title: 'id',
            align: "center",
            valign: 'middle',
        }, {
            field: 'userName',
            title: '登录名',
            align: "center",
            valign: 'middle',
        },{
            field: 'realName',
            title: '真实姓名',
            align: "center",
            valign: 'middle',
        },{
            field: 'sex',
            title: '性别',
            align: "center",
            valign: 'middle',
        },{
            field: 'email',
            title: '邮箱',
            align: "center",
            valign: 'middle',
        },{
            field: 'status',
            title: '状态',
            align: "center",
            valign: 'middle',
            formatter: function (value, row, index) {
                var a=row.id
                if(row.status=='1'){
                    return '<input value="'+a+'" type="checkbox" name="my-checkbox1" checked>';
                }else if(row.status=='0'){
                    return '<input value="'+a+'" type="checkbox" name="my-checkbox1" check>';
                }
            }
        },{
            field: 'address',
            title: '地址',
            align: "center",
            valign: 'middle',
        },{
            field: 'createTime',
            title: '注册时间',
            align: "center",
            valign: 'middle',
        }]
    })

    function search() {
        $('#table').bootstrapTable('refresh');
    }
    function fresh() {
        setTimeout(() => {$('#table').bootstrapTable('refresh');},1)
    }

    function initSwitch(){
        $('[name="my-checkbox1"]').bootstrapSwitch({
            onText : "on",      // 设置ON文本
            offText : "off",    // 设置OFF文本
            onColor : "success",// 设置ON文本颜色(info/success/warning/danger/primary)
            offColor : "danger",  // 设置OFF文本颜色 (info/success/warning/danger/primary)
            size : "mini",    // 设置控件大小,从小到大  (mini/small/normal/large)
            // 当开关状态改变时触发
            onSwitchChange:function(event,state){
                if(state==true){//打开
                    axios.put('userInfo/updateStatus/'+this.value+'/1').then((response)=>{})
                }else{//关闭
                    axios.put('userInfo/updateStatus/'+this.value+'/0').then((response)=>{})
                }
            }
        })
    }
</script>
</html>